<template>
    <div class="page flex-col">
        <div class="user-pic flex">
            <div class="pic-info">
                <div class="pic-container">
                    <img src="@/assets/pic2.png" alt="">
                    <div class="edit-icon-container">
                        <div class="flex">
                            <img class="edit-icon" src="@/assets/edit.png" alt="">
                        </div>
                    </div>
                </div>
                <p class="phone">135....154</p>
            </div>
        </div>
        <div class="tab-container">
            <div class="tab-nav flex">
                <p class="title" :class="{ 'active': active == 1 }" @click="active = 1">个人资料</p>
                <p class="title" :class="{ 'active': active == 2 }" @click="active = 2">安全设置</p>
            </div>
            <div class="setting-container">
                <div class="setting-item flex">
                    <span class="label">昵称</span>
                    <span class="value">@乂氼</span>
                    <img src="@/assets/right.png" alt="">
                </div>
                <div class="setting-item flex">
                    <span class="label">工号</span>
                    <span class="value">0001</span>
                    <img src="@/assets/right.png" alt="">
                </div>
                <div class="setting-item flex">
                    <span class="label">手机号</span>
                    <span class="value">135....154</span>
                    <img src="@/assets/right.png" alt="">
                </div>
                <div class="setting-item flex">
                    <span class="value" style="text-align: left;margin-left: 0;color: #a72b2b;">退出当前账号</span>
                    <img src="@/assets/right.png" alt="">
                </div>
            </div>
        </div>
      
        <div class="group_5 flex-row bottom-nav">
            <div class="image-text_3 flex-col">
                <img class="image_4" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPngb5a179b57265695c764913ad588f4330d1a741212fe9b742fde393bd591751bd" />
                <span class="text-group_6">账户</span>
            </div>

            <div class="image-text_5 flex-col" @click="() => { routerKey.push({ path: '/homeDetails' }) }">
                <img class="image_5" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPng8699fca86f2980dab24429de2bb6788c7f5c9d342ca4fa4f1fb747eb19643cea" />
                <span class="text-group_8">交易</span>
            </div>
            <div class="image-text_7 flex-col">
                <img class="thumbnail_7" referrerpolicy="no-referrer" src="@/assets/setting.png" />
                <span class="text-group_10" style="color: #D19310;">设置</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 1
        };
    },
    methods: {
        getImage(imageName) {
            return new URL(imageName, import.meta.url).href;
        }
    },
    created() {
        document.title = "设置"
    }
};
</script>
<style src="./walletcss/common.css" />
<style src="./walletcss/index.css" />

<style lang="less" scoped>
.page {
    background-color: #fff;
}

.group_2 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    left: 0;
    top: unset;
    padding-left: 0;
    padding-right: 0;

    // height: 60px;
    // background: #fff;
    // border-top: 1px solid #eee;
    .flex-col {
        margin-left: 0;
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
    }
}

.tab-container {
    background: #fff;
    padding: 20px;
    // margin-top: 30px;
    // min-height: 100%;

    .tab-nav {
        .title {
            font-size: 18px;
            color: #666;
            flex: 1;
            line-height: 25px;
            text-align: center;
        }

        .active {
            font-size: 19px;
            color: #111;
            font-weight: 600;
            position: relative;

            &::after {
                content: ' ';
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translate(-50%, 0);
                width: 75px;
                border-bottom: 3px solid #111;

            }
        }
    }

    .currency-balance {
        padding: 30px 0;

        .currency-item {
            align-items: center;
            padding: 12px 0;

            .img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                margin-right: 10px;
                overflow: hidden;
                position: relative;

                img {
                    position: absolute;
                    width: 150%;
                    height: 150%;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);

                    // position: relative;
                    // --tw-scale-x: 1.4 !important;
                    // --tw-scale-y: 1.4 !important;
                    // // --tw-translate-x:0;
                    // // --tw-translate-y:0;
                    // // --tw-rotate:0;
                    // // --tw-skew-x:0;
                    // // --tw-skew-y:0;
                    // transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translate(-5%,-5%) !important ;
                    // -webkit-transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) translate(-5%,-5%)  !important;
                    // -moz-transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
                    // -o-transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;;
                }
            }

            img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                margin-right: 10px;
            }

            .currency {
                font-size: 19px;
                flex: 1;
                color: #000;
            }

            .balance {
                font-size: 17px;
                // font-weight: bold;
                text-align: right;
                color: #333;
            }
        }
    }
}
.user-pic{
    margin: 40px auto 15px auto;
    align-items: center;
    justify-content: center;
    .pic-info{
        .pic-container{
            position: relative;
            width: max-content;
            // margin-bottom: 10px;
            img{
                border-radius: 50%;
                width: 120px;
                height: auto;
            }
            .edit-icon-container{
                position: absolute;
                right: -10px;
                bottom: -5px;
                background: #fff;
                border-radius: 50%;
                width: max-content;
                .flex{
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    border-radius: 50%;
                    width: max-content;
                    margin: 8px;
                    box-shadow: 0 0 2px #666;
                    .edit-icon{
                        margin: 10px;
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }
        .phone{
            font-size: 20px;
            text-align: center;
            margin-top: 15px;
            color: #666;
        }
    }
}
.setting-container{
    margin-top: 30px;
    .setting-item{
        align-items: center;
        padding: 10px 0;
        .label{
            font-size: 20px;
            color: #000;
        }
        .value{
            flex: 1;
            margin:0 5px 0 10px;
            font-size: 18px;
            color: #666;
            text-align: right;
        }
        img{
            width: 15px;
            height: auto;
        }
    }
}
</style>